{% liquid
  assign is_article_exists = 0
  assign current_article_id = 1
  if article
    assign current_article_id = article.id
  endif

  assign post_limit = section.settings.posts_per_row | times: section.settings.columns


   case section.settings.button_set_style
    when 'kiks-btn-secondary'
      assign first_button_class = 'kiks-btn-secondary'
    when 'kiks-btn-primary'
      assign first_button_class = 'kiks-btn-primary'
    when 'kiks-link'
      assign first_button_class = 'kiks-link'
  endcase
  %}
<div class="{% if request.page_type == 'index' %}my-blog{% else %}my-section{% endif %}">
  <div class="container">
    <h2 class="h1 mb-6 mb-md-7 text-center">{{ section.settings.heading | escape }}</h2>

    {% if section.settings.blog != blank and section.settings.blog.articles_count > 0 %}
      <div class="row row-cols-1 row-cols-md-{{ section.settings.posts_per_row }} gx-md-7 gx-3 gy-0 gy-md-7">
        {% for tmp_article in section.settings.blog.articles limit: post_limit %}
          {% unless forloop.first %}
            {% comment %}分割线{% endcomment %}
            <div class="col d-none">
              <div class="line border-top"></div>
            </div>
          {% endunless %}
          {% comment %}过滤重复的Blog post{% endcomment %}
          {% if tmp_article.id != current_article_id %}
            <div class="col">
              {% render 'featured-blog-card', 
                article: tmp_article, 
                posts_per_row: section.settings.posts_per_row, 
                show_featured_image: section.settings.show_featured_image, 
                show_date: section.settings.show_date, 
                show_author: section.settings.show_author, 
                show_excerpt: section.settings.show_excerpt, 
                show_button: section.settings.show_button %}
            </div>
          {% else %}
            {% assign is_article_exists = 1 %}
          {% endif %}
        {% endfor %}
        {% comment %}过滤后，补上一篇Blog post{% endcomment %}
        {% if is_article_exists == 1 %}
          {% for tmp_article in section.settings.blog.articles offset: post_limit limit: 1 %}
            {% comment %}分割线{% endcomment %}
            <div class="col d-none">
              <div class="line border-top"></div>
            </div>
            <div class="col">
              {% render 'featured-blog-card', 
                article: tmp_article, 
                posts_per_row: section.settings.posts_per_row, 
                show_featured_image: section.settings.show_featured_image, 
                show_date: section.settings.show_date, 
                show_author: section.settings.show_author, 
                show_excerpt: section.settings.show_excerpt, 
                show_button: section.settings.show_button %}
            {% endfor %}
            </div>
        {% endif %}
      </div>
    {% else %}
      {% comment %}默认样式{% endcomment %}
      <div class="row row-cols-1 row-cols-md-{{ section.settings.posts_per_row }} gx-4 gy-0 gy-md-6">
        {% for i in (1..post_limit) %}
          {% unless forloop.first %}
            {% comment %}分割线{% endcomment %}
            <div class="col d-none">
              <div class="line border-top"></div>
            </div>
          {% endunless %}
          <div class="col">
            {% render 'featured-blog-card', 
              article: blank, 
              posts_per_row: section.settings.posts_per_row, 
              show_featured_image: section.settings.show_featured_image, 
              show_date: section.settings.show_date, 
              show_author: section.settings.show_author, 
              show_excerpt: section.settings.show_excerpt, 
              show_button: section.settings.show_button %}
          </div>
        {% endfor %}
      </div>
    {% endif %}
  
    {% if section.settings.blog != blank and section.settings.show_view_all and post_limit < section.settings.blog.articles_count %}
      <div class="mt-0 mt-md-7 text-center">
        <a {% if section.settings.blog.url contains 'https://' %}
          target="_blank" rel="nofollow"
        {% endif %} class="btn {{ first_button_class }}" href="{{ section.settings.blog.url }}">
          {{ 'sections.blog_posts.view_all' | t }}
        </a>
      </div>
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "t:sections.featured-blog.name",
  "tag": "section",
  "class": "featured-blog",
  "settings": [
    {
      "type": "text",
      "id": "heading",
      "default": "Blog posts",
      "label": "t:sections.featured-blog.settings.heading.label"
    },
    {
      "type": "blog",
      "id": "blog",
      "label": "t:sections.featured-blog.settings.blog.label"
    },
    {
      "type": "radio",
      "id": "posts_per_row",
      "options": [  
        {
          "value": "2",
          "label": "2"
        },
        {
          "value": "3",
          "label": "3"
        }
      ],
      "default": "3",
      "label": "t:sections.featured-blog.settings.posts_per_row.label"
    },
    {
      "type": "range",
      "id": "columns",
      "min": 1,
      "max": 4,
      "step": 1,
      "default": 1,
      "label": "t:sections.featured-blog.settings.columns.label"
    },
    {
      "type": "checkbox",
      "id": "show_featured_image",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_featured_image.label",
      "info": "t:sections.featured-blog.settings.show_featured_image.info"
    },
    {
      "type": "checkbox",
      "id": "show_date",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_date.label"
    },
    {
      "type": "checkbox",
      "id": "show_author",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_author.label"
    },
    {
      "type": "checkbox",
      "id": "show_excerpt",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_excerpt.label"
    },
    {
      "type": "checkbox",
      "id": "show_button",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_button.label"
    },
    {
      "type": "checkbox",
      "id": "show_view_all",
      "default": true,
      "label": "t:sections.featured-blog.settings.show_view_all.label"
    },
     {
      "type": "select",
      "id": "button_set_style",
      "label": "Button set style",
      "options": [
        {
          "value": "kiks-btn-secondary",
          "label": "Secondary button"
        },
        { 
          "value": "kiks-btn-primary",
          "label": "Primary button"
        },
        {
          "value": "kiks-link",
          "label": "Link"
        }
      ],
      "default": "kiks-btn-secondary"
    }
  ],
  "presets": [
    {
      "name": "t:sections.featured-blog.presets.name",
      "settings": {
        "blog": "News"
      }
    }
  ]
}
{% endschema %}